<!--
 * @Description: 
 * @Author: Zhangx
 * @Date: 2023-05-15 15:56:12
 * @LastEditors: Zhangx
 * @LastEditTime: 2023-07-28 14:17:33
-->
<template>
  <div class="dialog_component">
    <el-dialog
      v-model="isDialog"
      :show-close="false"
      :before-close="$emit('beforeClose')"
      :close-on-click-modal="false"
      :width="dialogWidth"
    >
      <template #header>
        <div class="dialog_header">
          <span
            class="title"
            v-if="dialogTitle"
          >{{ props.dialogTitle }}</span>
          <el-icon
            v-if="closeIcon"
            class="icon"
            @click="$emit('cancelClick')"
          >
            <CircleClose />
          </el-icon>
        </div>
      </template>
      <slot
        name="body"
        class="dialog_body"
      />
      <template #footer>
        <div class="dialog_footer">
          <el-button
              :size="cancelButtonSize"
              :type="cancelButtonType"
              v-show="cancelText"
              @click="$emit('cancelClick')"
              class="cancelBtn">
          {{ props.cancelText }}
          </el-button>
          <el-button 
              :size="saveButtonSize"
              :type="saveButtonType"
              v-show="saveText"
              @click="$emit('saveClick')"
              class="saveBtn">
          {{ props.saveText }}
          </el-button>
          <el-button 
              :size="confirmButtonSize"
              :type="confirmButtonType"
              v-show="confirmText"
              @click="$emit('confirmClick')"
              class="confirmBtn">
          {{ props.confirmText }}
          </el-button>
          <!-- <buttonCom
            :size="cancelButtonSize"
            :type="cancelButtonType"
            v-show="cancelText"
            @click="$emit('cancelClick')"
          >
            {{
              props.cancelText
            }}
          </buttonCom>
          <buttonCom
            :size="saveButtonSize"
            :type="saveButtonType"
            v-show="saveText"
            @click="$emit('saveClick')"
          >
            {{
              props.saveText
            }}
          </buttonCom>
          <buttonCom
            :size="confirmButtonSize"
            :type="confirmButtonType"
            v-show="confirmText"
            @click="$emit('confirmClick')"
            class="confirmBtn"
          >
            {{
              props.confirmText
            }}
          </buttonCom> -->
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { CircleClose } from '@element-plus/icons-vue'
defineEmits(['cancelClick', 'beforeClose', 'confirmClick', 'saveClick'])
// const visible = ref(true)
const props = defineProps({
  dialogVisible: Boolean,
  dialogWidth: {
    type: String,
    default:''
  },
   closeIcon: {
    type: Boolean,
    default: true
  },
  dialogTitle: {
    type: String,
    default: ''
  },
  cancelText: {
    type: String,
    default: ''
  },
  confirmText: {
    type: String,
    default: ''
  },
  saveText: {
    type: String,
    default: ''
  },
  cancelButtonSize: {
    type: String,
    default: 'normal'
  },
  cancelButtonType: {
    type: String,
    default: 'default'
  },
  confirmButtonSize: {
    type: String,
    default: 'normal'
  },
  confirmButtonType: {
    type: String,
    default: 'primary'
  },
  saveButtonSize: {
    type: String,
    default: 'normal'
  },
  saveButtonType: {
    type: String,
    default: 'primary'
  }
})

let isDialog = computed(() => props.dialogVisible)
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
  // width: 600px !important;
  // padding-bottom: 65px;
  background: #ffffff;
  box-shadow: -1px 0px 15px 0px rgba(180, 204, 222, 0.5);
  border-radius: 16px;
  border: 1px solid #d8d8d8;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .el-dialog__header {
    width: 100%;
    height: 0px;
    padding: 0;
    position: relative;
    left: 8px;
  }

  .dialog_header {
    padding: 20px 20px 0px;
    // height: 90px;
    font-size: 19px;
    font-family: PingFangHK-Semibold, PingFangHK;
    font-weight: 600;
    display: flex;
    justify-content: flex-end;

    .title {
      margin: 0 auto;
    }

    // display: flex;
    // justify-content: space-between;

    img {
      width: 22px;
      height: 22px;
      cursor: pointer;
    }
  }

  .el-dialog__body {
    margin-top: 50px;
    width: 100%;
  }

  .btn-blue {
    margin-top: 30px;
    position: absolute;
    bottom: 45px;
    left: 50%;
    margin-left: -44px;
  }

  .btn-white {
    margin-top: 30px;
    position: absolute;
    bottom: 45px;
    left: 35%;
    margin-left: -44px;
  }
}

.cancelBtn {
  margin-right: 70px;
}
.saveBtn {
  margin-right: 70px;
}
</style>
